<template>
    <div class="backCard-total">
        <div class="back-box">
            <span class="backCard">可用余额</span>
        </div>
        <div class="bankState">
            <div 
            class="bankCd"
            v-for="(obj, index) in list"
            :key="index"
            >
             <div class="bank_img">
                <div class="basics_img">
                    <img :src="obj.bank_card_img" alt="" width="100%" height="100%">
                </div>
             </div>
             <div class="basic_card_type">
                 <div class="basic_title">
                     <p>
                         <span>{{ obj.bank_card_type }}</span>
                     </p>
                 </div>
             </div>
             <div class="basic_card_code">
                 <div class="basic_code">
                     <p>
                         <span>{{ obj.bank_card_code }}</span>
                     </p>
                 </div>
             </div>
             <div class="bankOperation">
                 <div class="bankCard-1">
                    <p class="myName">持卡人：{{ obj.user_name }}</p>
                 </div>
                 <div class="bankCard-2">
                     <el-button style="color:#999999; background-color:#F5F5F5; border:none; margin-top:14px;margin-left:100px" class="el-bank"></el-button>
                 </div>
             </div>
             
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data () {
        return {
            list:[]
        }
    },
    created () {
        this.findBankCard();
    },
    methods: {
        findBankCard() {
            axios({
                url:"/api/user/findBankCardByPhone",
            }).then((res) => {
                console.log(res);
                this.list = res.data.data;
            })
        },
        
    }
}
</script>

<style>
.backCard-total{
    width: 100%;
    height: 600px;
    background-color: white;
}
.back-box{
    width: 90%;
    height: 8%;
    /* background-color: aqua; */
    margin-top: 20px;
    margin-left: 40px;
    border-bottom: 1px solid rgb(224, 222, 222) ;
}
.backCard{
    font-size: 20px;
    margin-left: 16px;
}
.bankState{
    width: 100%;
    height: 100%;
    /* background-color: aqua; */
    float: left;
}
.bankCd{
    width: 38%;
    height: 196px;
    /* background-color: plum; */
    float: left;
    position: relative;
    border-radius: 12px;
    margin-left: 45px;
    margin-top: 38px;
}
.bank_img{
    width: 140px;
    height: 45px;
    float: left;
    border-radius: 10px;
}
.basics_img{
    width: 100%;
    height: 70%;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
}
.basic_card_type{
    width: 100px;
    height: 24%;
    float: right;
    border-radius: 10px;
}
.basic_title{
    height: 40%;
    float: right;
    margin-top: 15px;
    margin-right: 15px;
}
.basic_card_code{
    width: 240px;
    height: 30%;
    float: left;
    border-radius: 10px;
    margin-top: 40px;
    margin-left: 70px;
}
.basic_code{
    height: 45%;
    margin-left: 30px;
}
.bankOperation{
    float: left;
    width: 100%;
    height: 36%;
    background-color: #F5F5F5;
    border-radius: 10px;
}
.myName{
    color: #999999;
    font-size: 15px;
    text-align: center;
    padding-top: 22px;
}
.bankCard-1{
    width: 50%;
    height: 100%;
    border-radius: 10px;
    float: left;
}
.bankCard-2{
    width: 50%;
    height: 100%;
    float: left;
    border-radius: 10px;
    /* background-color: aquamarine; */
}
.el-bank:hover {
    color: rgb(165, 212, 243) !important;
}
</style>